<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <a href="#/">主入口</a>
    <a href="#/index">首页</a>
    <a href="#/my">我的</a>
    <div class="box"></div>
    <script>
        class Router{
            constructor({route}){
                this.route=route
                this.box=document.querySelector(".box")
                this.init()
            }
            init(){
                window.addEventListener('hashchange',()=>{
                    this.showView(window.location.hash.slice(1))
                })
            }
            showView(hash){
                this.box.innerHTML=this.route.filter(item=>item.path===hash)[0].component
            }
        }
        new Router({
            route:[
                {
                    path:'/',
                    component:'组入口'
                },
                {
                    path:'/index',
                    component:'首页'
                },
                {
                    path:'/my',
                    component:'我的'
                },
            ]
        })
    </script>
</body>
</html>